<style>
  .banner-text-new .text-top{
    font-size: 0;
 }
 .tenways-with-text .richtext p{
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  max-width: 585px;
  text-align: center;
  margin: 0 auto;
}
.banner-text .text_list .richtext{
    margin-top: 12px;
}
.text-top .video-mb{
   display: none;
}
.position-with-text .text-content .text_list{
    top: 150px;
}
.position-with-text .pc_banner{
    height: 100vh;
    padding-bottom: 0 !important;
}
.banner-text .text-bottom{
    z-index: 2;
}
.banner-text-new{
  margin-top: 0;
}
.banner-text{
    background: #000;
}
.tenways-with-text .comming-soon {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
}

@media screen and (max-width: 990px){
.position-video .banner-text .text_list{
    position: relative;
    top: 0;
    padding: 40px 0;
}
.tenways-with-text .richtext p{
    color: #000;
}
.position-with-text{
    background: #fff;
}
.position-with-text .text-content .text-bottom{
    background: #fff;
}
.tenways-with-text .richtext p {
    font-size: 14px;
    line-height: 22px;
}
.position-with-text .text-content .text_list .text-1{
    color: #000;
}
.banner-text .text_list .richtext p{
    color: #2F80ED;
}
.position-with-text .text_list{
    padding-top: 0 !important;
}
.text-top .video-pc{
    display: none;
 }
.text-top .video-mb{
    display: block;
 }
.text_list .text span{
    display: block;
 }
 .position-with-text .text_list svg path{
    fill: #2F80ED;
 }
 .position-with-text .text-bottom .richtext p{
   color: #8D8D8D;
 }
 .position-video .app-image .app-text .image-with-text .grid__item:first-child{
  height: auto;
}
.position-video #shopify-section-header{
  position: relative;
}
.banner-text .text-content {
  min-height: auto;
  height: auto;
}
.text_list svg{
  height: 12px;
  width: auto;
}
.banner-text .text-bottom {
  position: relative;
  width: 100%;
  bottom: auto;
  left: auto;
  transform: none;
}
.banner-text .text_list .text {
  font-size: 23px;
  line-height: 32px;
  margin-top: 4px;
}
.tenways-with-text .text-bottom {
  background: #030404;
  color: #fff;
  padding: 20px 0;
}
.tenways-with-text .feature>div div{
  color: #fff;
  font-size: 12px;
  line-height: 15px;
}
.tenways-with-text .feature .text{
  text-align: left;
  margin-left: 8px;
}
.tenways-with-text .feature .slide {
  font-size: 18px;
  letter-spacing: -.015em;
  line-height: 180%;
  display: flex;
  align-items: center;
  flex: 0 0 50%;
  background: rgba(103, 115, 159, 0.18);
  border-radius: 8px;
  padding: 16px 12px;
  height: 100%;
}
.tenways-with-text .feature-text .feature{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 8px;
}
.tenways-with-text .image_mobile {
  display: block;
}
.tenways-with-text .pc_banner  {
  display: none;
}
.position-video .block-video {
  padding: 40px 0;
}
.position-video .ten-banner .banner__text {
  margin-top: 16px;
}
.position-video .feature-text svg{
  width: 32px;
  height: 32px;
}
.position-video .banner .image_mobile{
  display: flex;
  min-height: 75vh;
}
.banner-first .feature-text {
  width: 100%;
  padding: 0 26px;
}
.banner-first .banner .feature>div {
  margin-bottom: 0;
  margin-top: 20px;
  width: 50%;
}
.feature-text .feature {
  flex-direction: row;
  flex-wrap: wrap;
}
.banner-first .banner .banner__content {
  align-items: center !important;
}
.banner-text .position-video .text_list{
  position: relative;
  top: 0;
  padding: 40px 0;
}
.banner-text .position-with-text .text_list{
  position: relative;
  top: 0;
  padding: 40px 0;
}
 .tenways-with-text .comming-soon {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
  } 
}

@media screen and (min-width: 700px) and (max-height: 700px) {
  .tenways-with-text .comming-soon {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
  }
}
</style>
<div class="tenways-with-text {% unless section.settings.position %} position-with-text {% endunless %} {% if section.settings.video %} position-video {% endif %}" >
  <div class="text-content">
    <div class="text_list">
      <div class="text-top">
        <div class="page-width">
        {% if section.settings.html !=blank %}
          <div class="html">{{ section.settings.html }}</div>
        {% endif %}
        {% if section.settings.text !=blank %}
          <div class="text text-1">{{ section.settings.text }}</div>
        {% endif %}
        {% if section.settings.richtext !=blank %}
          <div class="richtext text-2">{{ section.settings.richtext }}</div>
        {% endif %}
        {% if section.settings.text2 != blank and section.settings.product != blank %}
          <div class="comming-soon">{{ section.settings.text2 }}<span> {{ section.settings.product.price | money  }}</span></div>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="text-top">      
    {% if section.settings.video != blank %}          
      <div class="video-pc">
        {{ section.settings.video_html }}
      </div>
      <div class="video-mb">
        {{ section.settings.video_mb }}
      </div>
    {% else %}
      <div class="pc_banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          <img
              srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1400 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
              {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
              {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
              {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
              src="{{ section.settings.image | img_url: '1500x' }}"
              data-src="{{ section.settings.image | img_url: '1500x' }}"
              alt="{{ section.settings.image.alt | escape }}"
              loading="lazy"
              class="lazyload"
              width="{{ section.settings.image.width }}"
              height="{{ section.settings.image.height }}"
          >
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
      <div class="image_mobile image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
        >
        {%- if section.settings.image_mobile != blank -%}
        <img
        srcset="{%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 412 -%}{{ section.settings.image_mobile | img_url: '412x' }} 412w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1100 -%}{{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1903 -%}{{ section.settings.image_mobile | img_url: '1903x' }} 1903w,{%- endif -%}
        {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
        sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image_mobile | img_url: '990x' }}"
        data-src="{{ section.settings.image_mobile | img_url: '990x' }}"
        loading="lazy"
        class="lazyload"
        alt="{{ section.settings.image_mobile.alt | escape }}"
        width="{{ section.settings.image_mobile.width }}"
        height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
        >
        {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    {% endif %}
  </div>
      <div class="text-bottom">
        <div class="page-width">
          {%- for block in section.blocks -%}
            {% case block.type %}
            {%- when 'feature' -%}
            <div class="feature-text" {{ block.shopify_attributes }}>
              <div class="feature">
                <div class="slide">
                  {%- if block.settings.html_1 != blank -%}
                  {{ block.settings.html_1 }}
                  <div class="text"> {{ block.settings.text_1 }}</div>
                  {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_2 != blank -%}
                  {{ block.settings.html_2 }}
                  <div class="text"> {{ block.settings.text_2 }}</div>
                {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_3 != blank -%}
                  {{ block.settings.html_3 }}
                  <div class="text"> {{ block.settings.text_3 }}</div>
                {%- endif -%}
                </div>
                <div class="slide">
                  {%- if block.settings.html_4 != blank -%}
                  {{ block.settings.html_4 }}
                  <div class="text"> {{ block.settings.text_4 }}</div>
                {%- endif -%}
                </div>
              </div>
            </div>
            {%- when 'richtext' -%}
              {% if block.settings.richtext !=blank %}
               <div class="richtext text-2" {{ block.shopify_attributes }}>{{ block.settings.richtext }}</div>
             {% endif %}
            {%- endcase -%}
            {%- endfor -%}
        </div>  
      </div>
   </div>
</div>

{% unless section.settings.interaction %}
<script>
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }

    function initScrollMagic() {
      const tenwaysBlockDes = document.querySelector(".position-with-text .text-content");
      const tenwaysAgot = tenwaysBlockDes.querySelector(".text_list");
      const AgoxController = new ScrollMagic.Controller();
      const tl = new TimelineMax();
      
      tl.fromTo(
        '.position-with-text .text_list',
        1,
        {
          autoAlpha: 0,
          opacity: 0
        },
        {
          autoAlpha: 1,
          opacity: 1,
          yPercent: '-60%',
          ease: Linear.easing
        },
      )

      let scene6 = new ScrollMagic.Scene({
        duration: '300',
        triggerElement: tenwaysBlockDes,
        triggerHook: 0
      })
      .setTween(tl)
      .setPin(tenwaysBlockDes)
      .addTo(AgoxController); 
    }

    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( AgoxController !== null && AgoxController !== undefined ) {
          AgoxController = AgoxController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( AgoxController === null || AgoxController === undefined ) {
          initScrollMagic();
        }
      }
    });
  })
</script>
{% endunless %}

{% schema %}
    {
      "name": "Tenways with text",
      "tag": "section",
      "class": "banner-text spaced-section spaced-section--full-width banner-text-new element_top",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "checkbox",
          "id": "interaction",
          "label": "Interaction",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "position",
          "label": "Position",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "video",
          "label": "show video",
          "default": false
        },
        {
        "type": "html",
        "id": "video_html",
        "label": "video pc"
       },
       {
        "type": "html",
        "id": "video_mb",
        "label": "video mb"
       },
        {
        "type": "html",
        "id": "html",
        "label": "Icon"
       },
       {
        "type": "html",
        "id": "text",
        "label": "text"
       },
       {
          "type": "text",
          "id": "text2",
          "label": "text 2"
        },
       {
        "type": "richtext",
        "id": "richtext",
        "label": "richtext"
       },
        {
        "type": "image_picker",
        "id": "image",
        "label": "t:sections.image-with-text.settings.image.label"
       },
        {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Image mobile"
        },
        {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-with-text.settings.height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.height.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.image-with-text.settings.height.label"
    }
      ],
      "blocks": [
        {
      "type": "feature",
      "name": "feature",
      "limit": 1,
      "settings": [
      {
        "type": "html",
        "id": "html_1",
        "label": "html_1"
      },
      {
        "type": "text",
        "id": "text_1",
        "label": "text 1"
      },
      {
        "type": "html",
        "id": "html_2",
        "label": "html_2"
      },
      {
        "type": "text",
        "id": "text_2",
        "label": "text 2"
      },
      {
        "type": "html",
        "id": "html_3",
        "label": "html_3"
      },
      {
        "type": "text",
        "id": "text_3",
        "label": "text 3"
      },
      {
        "type": "html",
        "id": "html_4",
        "label": "html_4"
      },
      {
        "type": "text",
        "id": "text_4",
        "label": "text 4"
      }
      ]
    },
    {
      "type": "richtext",
      "name": "richtext",
      "settings": [
        {
        "type": "richtext",
        "id": "richtext",
        "label": "richtext"
        }
      ]
    }
      ],
      "presets": [
        {
            "name": "Tenways with text"
        }
      ]
    }
      {% endschema %}